<template>
	<div class="mb-[6px]">{{ $t('wallet.currency') }}</div>
	<base-dropdown
		v-model="selectedCurrency"
		v-model:item="selectedCurrencyItem"
		:default-value="
			<CurrencyEnum>router.currentRoute.value.query.currency || walletStore.balanceCur?.currency
		"
		ref="dropdownCurrencyRef"
		:options="currencyOptions"
		filterable
		filter-field="appName"
		min-width="trigger"
		immediate>
		<template #default="{ data, show }">
			<div class="flex items-center gap-1 h-12 px-3 rounded-lg bg-bg-2">
				<base-currency v-if="data" :currency="data?.currency" />
				<div>{{ data?.appName || data?.currency }}</div>
				<base-amount
					:value="data?.freeAmount"
					:currency="data?.currency"
					hide-currency
					class="flex-auto w-[1px] text-right text-t-2" />
				<base-icon
					name="down"
					class="ml-auto text-t-3 text-[20px] duration-300"
					:class="{ 'rotate-180': show }" />
			</div>
		</template>
		<template #content="{ item }">
			<div class="flex items-center w-full gap-1 h-12">
				<base-currency :currency="item?.currency" />
				<div>{{ item?.appName || item?.currency }}</div>
				<base-amount
					:value="item?.freeAmount"
					:currency="item?.currency"
					hide-currency
					class="flex-auto w-[1px] text-right text-t-2" />
				<div class="w-5">
					<base-icon v-if="item.id === selectedCurrency" name="tick" class="text-t-1" size="20" />
				</div>
			</div>
		</template>
	</base-dropdown>
	<template v-if="type === 'crypto'">
		<div class="h-4" />
		<div class="mb-[6px]">{{ $t('wallet.network') }}</div>
		<base-dropdown
			v-model="selectedNetwork"
			v-model:item="selectedNetworkItem"
			:options="
				selectedCurrencyItem?.userAssets?.map((i) => ({
					...i,
					id: i.thirdAssetId,
					text: i.cpnDisplay || i.cpn
				}))
			"
			min-width="trigger"
			immediate>
			<template #default="{ data, show }">
				<div class="flex items-center gap-1 h-12 px-3 rounded-lg bg-bg-2">
					<n-ellipsis v-bind="NBind.Ellipsis">{{ data?.text }}</n-ellipsis>
					<base-icon
						name="down"
						class="ml-auto text-t-3 text-[20px] duration-300"
						:class="{ 'rotate-180': show }" />
				</div>
			</template>
		</base-dropdown>
	</template>
	<div class="h-4" />
</template>

<script setup lang="ts">
import { computed, PropType, ref, watch } from 'vue'
import { filter, find } from 'lodash-es'
import { NEllipsis } from 'naive-ui'
import { router } from '@/router'
import { useWalletStore } from '@/store'
import { BalanceItem, FiatPayChannel, NetworkAddressItem } from '@/types'
import { BaseAmount, BaseCurrency, BaseDropdown, BaseIcon } from '@/components/base'
import { CurrencyEnum } from '@/enums'
import { NBind } from '@/plugins/naive-ui'

defineOptions({ name: 'WalletSelectCurrency' })

const props = defineProps({
	type: {
		type: String as PropType<'crypto' | 'fiat'>,
		default: 'crypto'
	},
	options: {
		type: [Array, null] as PropType<any[] | null>,
		default: null
	},
	currency: {
		type: String as PropType<CurrencyEnum | ''>,
		default: ''
	},
	currencyItem: {
		type: Object as PropType<BalanceItem | FiatPayChannel>,
		default: undefined
	},
	network: {
		type: String,
		default: ''
	},
	networkItem: {
		type: Object as PropType<NetworkAddressItem>,
		default: undefined
	}
})
const emits = defineEmits([
	'update:currency',
	'update:network',
	'update:currency-item',
	'update:network-item'
])

const walletStore = useWalletStore()
const selectedCurrency = ref<CurrencyEnum | ''>('')
const selectedCurrencyItem = ref<BalanceItem>()
const selectedNetwork = ref('')
const selectedNetworkItem = ref<NetworkAddressItem>()
const dropdownCurrencyRef = ref<InstanceType<typeof BaseDropdown>>()
const currencyOptions = computed(() => {
	let list
	if (props.options) {
		list = props.options.map((item) => ({
			...find(walletStore.balanceList, { currency: item?.currency }),
			...item
		}))
	} else {
		list = filter(walletStore.balanceList, { assetType: props.type === 'fiat' ? 2 : 1 })
	}
	return list.map((i) => ({ ...i, id: i.currency }))
})

watch(selectedCurrency, (value) => emits('update:currency', value))
watch(selectedCurrencyItem, (value) => emits('update:currency-item', value))
watch(selectedNetwork, (value) => emits('update:network', value))
watch(selectedNetworkItem, (value) => emits('update:network-item', value))
watch(
	() => props.currency,
	() => (selectedCurrency.value = props.currency)
)
watch(
	() => selectedNetworkItem.value?.thirdAssetId,
	() => {
		const item = selectedNetworkItem.value
		// 如果用户当前选择的网络没有钱包地址 就调用接口用户创建
		if (props.type === 'crypto' && item && !item?.walletAddress && selectedCurrency.value) {
			walletStore.createWallet({
				currency: selectedCurrency.value,
				thirdAssetId: item.thirdAssetId
			})
		}
	}
)

defineExpose({ onClickShow: () => dropdownCurrencyRef.value?.onClickShow() })
</script>

<style scoped></style>
